<template>
  <el-dialog
    title="新增分组"
    width="400px"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="上级" prop="parentId" label-width="50px">
        <el-cascader
          :options="parentData"
          :props="cascaderProps"
          v-model="form.parentId"
          clearable
          style="width: 100%;"></el-cascader>
      </el-form-item>
      <el-form-item label="组名" prop="name" label-width="50px">
        <el-input v-model="form.name" autocomplete="off" clearable></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="orderNum">
        <el-input-number v-model="form.orderNum" :min="0"></el-input-number>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {mapActions} from 'vuex'

  export default {
    name: 'order-add',
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        form: {
          parentId: '0',
          name: '',
          orderNum: 0
        },
        parentData: [],
        cascaderProps: {
          checkStrictly: true,
          value: 'id',
          label: 'name',
          children: 'list'
        },
        rules: {
          // parentId: [
          //   { required: true, message: '请选择上级', trigger: 'blur' }
          // ],
          name: [
            { required: true, message: '请输入组名', trigger: 'blur' },
            { min: 1, max: 10, message: '最多 10 个字符', trigger: 'blur' }
          ],
          orderNum: [
            { required: true, message: '请输入排序', trigger: 'blur' }
          ]
        }
      }
    },
    mounted () {
      this.getGroupTree()
    },
    methods: {
      ...mapActions('d2admin/pm.group', [
        'groupAdd',
        'groupTree'
      ]),
      getGroupTree () {
        this.groupTree().then(
          res => {
            this.parentData = res
          }
        )
      },
      // 取消
      cancel() {
        this.$emit('cancel', false)
      },
      // 提交
      submit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            let form = JSON.parse(JSON.stringify(this.form))
            form.parentId = form.parentId[form.parentId.length - 1]
            this.submitHandle(form)
          }
        })
      },
      // 提交回调
      submitHandle(form) {
        this.groupAdd(form).then(res => {
          this.$emit('submit', false)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
